<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue"
let sum = ref(0)
console.log('---setup---')
onBeforeMount(()=>{
    console.log('---onBeforeMount---')
})
onMounted(()=>{
    console.log('---onMounted---')
})
onBeforeUpdate(()=>{
    console.log('---onBeforeUpdate---')
})
onUpdated(()=>{
    console.log('---onUpdated---')
})
onBeforeUnmount(()=>{
    console.log('---onBeforeUnmount---')
})
onUnmounted(()=>{
    console.log('---onUnmounted---')
})

// setup 中 的生命周期要先执行
/* import { ref } from "vue";
export default {
    name: 'LifeCycle',
    setup() {
        let sum = ref(0);
        return { sum }
    },
    beforeCreate() {
        console.log('------beforeCreate------')
    },
    created() {
        console.log('------created------')
    },
    beforeMount() {
        console.log('------beforeMount------')
    },
    mounted() {
        console.log('------mounted------')
    },
    beforeUpdate() {
        console.log('------beforeUpdate------')
    },
    updated() {
        console.log('------updated------')
    },
    beforeUnmount() {
        console.log('------beforeUnmount------')
    },
    unmounted() {
        console.log('------unmounted------')
    }
} */
</script>

<template>
    <h1>当前求和为{{ sum }}</h1>
    <button @click="sum++">点我+1</button>
</template>
